<template>
  <main-container>
    <v-table
      ref="table"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
      :data="tableData"
      :columns="columns"
    >
      <el-table-column label="操作" align="center" width="120px">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope)">查看</el-button>
        </template>
      </el-table-column>
    </v-table>
  </main-container>
</template>

<script>
import table from '@/common/mixins/table'
import { getAuthorList } from '@/api/author'

export default {
  name: 'AuthorManage',
  mixins: [table],
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '作者',
          prop: 'name'
        },
        {
          label: '头像',
          prop: 'avatar',
          render: (h, params) => {
            let { avatar } = params.row
            return h('el-image', {
              style: {
                width: '80px',
                height: '80px'
              },
              props: {
                fit: 'cover',
                src: avatar,
                'preview-src-list': [avatar]
              }
            })
          }
        },
        {
          label: '简介',
          prop: 'profile',
          isShowTip: true
        }
      ]
    }
  },
  methods: {
    async init() {
      let { page } = this
      let res = await getAuthorList({ page })
      let { code, data } = res
      if (code === 0) {
        let { list, total } = data
        this.total = total
        this.tableData = list
      }
    },
    handleView({ row }) {
      let { id } = row
      this.$router.push({ name: 'authorDetail', query: { id } })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
// @import './index.scss';
</style>
